<template>
  <section class="component customer-tag ">
    <div class="model">
      <div>客户层标签</div>
      <tag-component :tags="customerTag" class="tag" />
    </div>
    <div class="model">
      <div>账户层标签</div>
      <tag-component :tags="accountTag" class="tag" />
    </div>
    <div class="model">
      <div>手工标识</div>
      <div>
        <span v-for="item in tagArr" :key="item.id" class="tag">{{ item.handWorkName }}</span>
      </div>
      <manual-tag :selectArr="selectArr" :tag="tagArr" @tagChanges="tagChanges" />
    </div>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import TagComponent from "./tag-component.vue";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");
import { namespace } from "vuex-class";
import ManualTag from "./manual-tag.vue";
import { CustomerGroupManageService } from "~/services/domain-service/customer-group-manage.service";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { CodePrarmeterService } from "~/services/management-service/code-prarmeter.service";

@Component({
  components: {
    TagComponent,
    ManualTag
  }
})
export default class CustomerTag extends Vue {

  @Dependencies(CustomerGroupManageService) private customerGroupManageService: CustomerGroupManageService;
  @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @Dependencies(CodePrarmeterService) private CodePrarmeterService: CodePrarmeterService;
  @CollectionExecutionModule.State private caseNo;
  @CollectionExecutionModule.State private personalNo;
  @CollectionExecutionModule.State private caseId;

  private customerTag: any = [];
  private accountTag: any = [];
  private tagArr: any = []
  private selectArr: any = []

  @Watch("caseNo") private atChange (value) {
    this.atParamsHandler();
  }
  @Watch("personalNo") private ctChange () {
    this.ctParamsHandler();
  }
  private tagChanges (val) {
    this.tagArr = val
  }

  private mounted () {
    this.getSelectArr()
    // 如果为空,则请求
    if (!this.customerTag.length) this.ctParamsHandler()
    if (!this.accountTag.length) this.atParamsHandler()
  }
  private getDetailTag () { // 获取已有标识
    this.CaseInfoService.getCaseInfoRecordById({ caseInfoRecordId: this.caseId }).subscribe(data => {
      this.tagArr = data.handWorkCodeResponse
    })
  }

  private getSelectArr () { // 获取下拉框内容
    this.CodePrarmeterService.getAllHandWorkCode().subscribe(data => {
      this.selectArr = data
      this.getDetailTag()
    })
  }

  private atParamsHandler () {
    this.customerGroupManageService
      .getCaseTags({ caseNumber: this.caseNo })
      .subscribe(data => {
        this.accountTag = [];
        const arr = this.sortHandler(data);
        arr.forEach(v => {
          if (v.property === "YES") this.accountTag.push(v.description);
        });
      });
  }

  private ctParamsHandler () {
    this.customerGroupManageService
      .getPersonalTags({ personalId: this.personalNo })
      .subscribe(data => {
        this.customerTag = [];
        const arr = this.sortHandler(data);
        arr.forEach(v => {
          if (v.property === "YES") this.customerTag.push(v.description);
        });
      });
  }

  private sortHandler (data) {
    return data.sort((a, b) => a.priority - b.priority);
  }
}
</script>
<style lang="less" scoped>
.tag {
  font-size: 14px;
  margin-right: 6px;
  padding: 0 6px;
}
.component.customer-tag {
  display: flex;
  padding: 7px 10px;
  //
  height: 50px;
  border: 1px solid #ebeef5;

  .model {
    width: 32%;
    display: flex;
    line-height: 36px;
    flex-wrap: wrap;
    & > div {
      // width: 80px;
      margin-right: 5px;
    }
  }
}
</style>
